<template>
	<view>
		<!-- <cu-custom bgColor="bg-gradual-pink" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">卡片</block>
		</cu-custom> -->
		<!-- title -->
		<cu-custom bgColor="bg-gradual-blue">
			<block slot="content">{{name}}</block>
		</cu-custom>
		<!-- 列表 -->
		<scroll-view lower-threshold="10" scroll-y="true" class="scroll-Y" @scrolltolower="upper">
			<view class="cu-card case no-card">
				<view class="cu-item shadow" v-for="(item,index) in list" :key="item.id" @click="go_item(item.id)" :style="[{animation: 'show ' + ((index+1)*0.2+1) + 's 1'}]">
					<view class="image">
						<image :src="item.book_img" mode="widthFix"></image>
						<view class="cu-tag bg-blue">{{item.tag}}</view>
						<view class="cu-bar bg-shadeBottom"> <text class="text-cut">{{item.title}}</text></view>
					</view>
					<view class="cu-list menu-avatar">
						<view class="cu-item">
							<view class="cu-avatar round lg" :style="[{backgroundImage:'url('+href+'/image/icon.png)'}]"></view>
							<view class="content flex-sub">
								<view class="text-grey">{{name}}</view>
								<view class="text-gray text-sm flex justify-between">
									{{item.timer}}
									<view class="text-gray text-sm">
										<text class="cuIcon-attentionfill margin-lr-xs"></text> {{item.look_num}}
										<!-- <text class="cuIcon-appreciatefill margin-lr-xs"></text> 99+
										<text class="cuIcon-messagefill margin-lr-xs"></text> (()) -->
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				scrollTop: 0,
				page: 0,
				num: 0,
				list: "",
				name: "",
				href: ""
			}
		},
		methods: {
			upper: function(e) {
				if (this.page < this.num) {
					this.ajax();
				} else {
					uni.showToast({
						title: '到底了~',
						icon: "none",
						duration: 2000
					});
				};
			},
			set_img(d) {
				var len = d.length;
				for (var i = 0; i < len; i++) {
					d[i].book_img = d[i].book_img.includes("../../../") ? this.href + "/" + d[i].book_img.split(
						"../../../")[1] : this.href + "/assets/image/null.jpg"
				};
				return d;
			},
			ajax() {
				var _this = this;
				uni.showLoading({
					title: '加载中...'
				});
				uni.request({
					url: this.$api + 'index.php',
					method: "POST",
					data: JSON.stringify({
						id: 101,
						page: this.page
					}),
					header: {
						'content-type': 'application/json'
					},
					success: (res) => {
						console.log(res.data);
						uni.hideLoading();
						if (res.data.code === '200') {
							var data = _this.set_img(res.data.data);
							var len = data.length;
							var arr = _this.list || [];
							for (var i = 0; i < len; i++) {
								arr.push(data[i]);
							};
							_this.list = arr;
							_this.page += 1;
							_this.num = res.data.num;
						} else {
							uni.showLoading({
								title: '加载失败,请重试!'
							});
							setTimeout(function() {
								uni.hideLoading();
							}, 500);
						};
					}
				});
			},
			go_item(d) {
				uni.navigateTo({
					url: '/pages/item/item?id=' + d
				});
			}
		},
		onLoad: function(option) {
			this.ajax();
			this.name = this.$name;
			this.href = this.$href;
		},
		onShareAppMessage(res) {
			return {
				title: this.name,
				path: '/' + this.$mp.page.route
			}
		}
	}
</script>

<style>
	.scroll-Y {
		width: 100%;
		height: 1250upx;
	}
</style>
